<template>
  <div style="margin-top: 20px;">
    <!-- 高级搜索 -->
    <el-form size="small" ref="searchForm" :model="searchForm" label-width="90px" label-position="left">
      <el-row :gutter="50">
        <el-col :span="8">
          <!-- 关键词 -->
          <el-form-item label="关键词">
            <el-input v-model="searchForm.keyrowds"></el-input>
          </el-form-item>
        </el-col>

        <!-- 穿云箭模式 -->
        <el-col :span="8" style="position: relative">
          <el-checkbox v-model="searchForm.isOven" style="position: absolute;left: -2px;line-height: 30px"></el-checkbox>
          <el-form-item label="穿云箭模式">
            <el-input v-model="searchForm.oven"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div style="float: right; line-height:32px;color:#919191">
            <label>下次默认打开高级搜索模式</label>
            <span class="ml-10"><el-switch v-model="switchValue" active-color="#0073dd" inactive-color="#a2aec8"></el-switch></span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="8" v-for="(item,index) in newList" :key="index">
          <!-- 上家公司 -->
          <template v-if="item.name == 'lastCompany'">
            <el-form-item label="上家公司">
              <el-input v-model="searchForm.lastCompany" 
              placeholder="输入上家公司，条件直接以逗号隔开"
              style="width:100%;" size="small">
              </el-input>
            </el-form-item>
          </template>

          <!-- 工作地 -->
          <template v-if="item.name == 'workingPlace'">
            <el-form-item label="工作地">
              <el-input v-model="searchForm.workingPlace" placeholder="输入工作地，条件直接以逗号隔开"></el-input>
            </el-form-item>
          </template>

          <!-- 标签 -->
          <template v-if="item.name == 'tags'">
            <el-form-item label="标签">
              <el-input v-model="searchForm.tags"></el-input>
            </el-form-item>
          </template>

          <!-- 毕业院校 -->
          <template v-if="item.name == 'academy'">
            <el-form-item label="毕业院校">
              <el-input v-model="searchForm.academy" placeholder="输入毕业院校"></el-input>
            </el-form-item>
          </template>

          <!-- 候选人来源 -->
          <template v-if="item.name == 'source'">
            <el-form-item label="候选人来源">
              <el-select v-model="searchForm.source" placeholder="选择候选人来源" style="width:100%">
                <el-option value="1" label="自己录入"></el-option>
                <el-option value="2" label="伯乐"></el-option>
                <el-option value="3" label="种子简历"></el-option>
              </el-select>
            </el-form-item>
          </template>
          
          <!-- 工作年限 -->
          <template v-if="item.name == 'workingLife'">
            <el-form-item label="工作年限">
              <el-row>
                <el-col :span="11">
                  <el-select v-model="searchForm.workingLifeMin" placeholder="最低">
                    <el-option value="1" label="1"></el-option>
                    <el-option value="2" label="2"></el-option>
                    <el-option value="3" label="3"></el-option>
                    <el-option value="4" label="4"></el-option>
                    <el-option value="5" label="5"></el-option>
                    <el-option value="6" label="6"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" style="text-align:center">-</el-col>
                <el-col :span="11">
                  <el-select v-model="searchForm.workingLifeMax" placeholder="最高">
                    <el-option value="1" label="1"></el-option>
                    <el-option value="2" label="2"></el-option>
                    <el-option value="3" label="3"></el-option>
                    <el-option value="4" label="4"></el-option>
                    <el-option value="5" label="5"></el-option>
                    <el-option value="6" label="6"></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </template>

          <!-- 职位 -->
          <template v-if="item.name == 'job'">
            <el-form-item label="职位">
              <el-input v-model="searchForm.job"></el-input>
            </el-form-item>
          </template>

          <!-- 项目 -->
          <template v-if="item.name == 'project'">
            <el-form-item label="项目">
              <el-input v-model="searchForm.project"></el-input>
            </el-form-item>
          </template>

          <!-- 最高学历 -->
          <template v-if="item.name == 'highestEducation'">
            <el-form-item label="最高学历">
              <el-select v-model="searchForm.highestEducation">
                <el-optio value="1" label="小学"></el-optio>
                <el-optio value="2" label="初中"></el-optio>
                <el-optio value="3" label="高中"></el-optio>
                <el-optio value="4" label="中专"></el-optio>
                <el-optio value="5" label="本科"></el-optio>
                <el-optio value="6" label="硕士"></el-optio>
                <el-optio value="7" label="博士"></el-optio>
              </el-select>
            </el-form-item>
          </template>

          <!-- 性别 -->
          <template v-if="item.name == 'gender'">
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender">
                <el-option value="1" label="男"></el-option>
                <el-option value="2" label="女"></el-option>
              </el-select>
            </el-form-item>
          </template>

          <!-- 曾经就职公司 -->
          <template v-if="item.name == 'previousCompanies'">
            <el-form-item label="曾经就职公司">
              <el-select v-model="searchForm.previousCompanies" multiple>
                <el-option value="1" label="百度"></el-option>
                <el-option value="2" label="京东"></el-option>
                <el-option value="3" label="腾讯"></el-option>
                <el-option value="4" label="阿里巴巴"></el-option>
              </el-select>
            </el-form-item>
          </template>

          <!-- 状态 -->
          <template v-if="item.name == 'status'">
            <el-form-item label="状态">
              <el-select v-model="searchForm.status">
                <el-option value="1" label="新晋候选人"></el-option>
                <el-option value="2" label="已联系"></el-option>
                <el-option value="3" label="未联系"></el-option>
              </el-select>
            </el-form-item>
          </template>
          
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {Row, Col, Input, Select, Option, OptionGroup, Form, FormItem, Checkbox, Switch} from 'element-ui'
  function sortNum(a,b) {//排序方法
      return a.sort - b.sort;
  }
  export default {
    computed:{
      newList:function(){
        return this.list.sort(sortNum)//调用排序方法
      }
    },
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Input.name]: Input,
      [Select.name]: Select,
      [Option.name]: Option,
      [OptionGroup.name]: OptionGroup,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Checkbox.name]: Checkbox,
      [Switch.name]: Switch
    },
    data () {
      return {
        switchValue: false,
        searchForm: {
          lastCompany: ''
        },
        list: [
          {
            name: 'lastCompany',
            nameStr: '上家公司',
            sort: 1
          },
          {
            name: 'workingPlace',
            nameStr: '工作地',
            sort: 2
          },
          {
            name: 'tags',
            nameStr: '标签',
            sort: 3
          },
          {
            name: 'academy',
            nameStr: '毕业院校',
            sort: 4
          },
          {
            name: 'source',
            nameStr: '候选人来源',
            sort: 5
          },
          {
            name: 'workingLife',
            nameStr: '工作年限',
            sort: 6
          },
          {
            name: 'job',
            nameStr: '职位',
            sort: 7
          },
          {
            name: 'project',
            nameStr: '项目',
            sort: 8
          }
        ]
      }
    }
  }
</script>

<style lang="scss">
  .multiple-select{
    input[type="text"]{
      height: 32px !important;
    }
  }
 
</style>
